<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 300px;
            border: 1px solid green;
            text-align: center;
        }

        table {
            width: 250px;
            margin: 0 auto;
            border: 1px solid #000;
            border-collapse: collapse;
        }

        .tr {
            background-color: #4c83d6;
            height: 30px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box">
            <p>
                搜索名称：<input type="text" name="" id="" v-model="msg" @input="change">
            </p>
            <table>
                <tr class="tr">
                    <td>{{title.name|toUp}}</td>
                    <td>{{title.gender|toUp}}</td>
                    <td>{{title.age|toUp}}</td>
                </tr>
                <tr v-for="(item,index) in change" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.gender}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script src="./js/vue.js"> </script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            arr: [
                { name: 'rick', gender: 'male', age: 21 },
                { name: 'demen', gender: 'male', age: 25 },
                { name: 'jack', gender: 'male', age: 24 },
                { name: 'john', gender: 'female', age: 22 },
                { name: 'licy', gender: 'female', age: 26 },
            ],
            title: {
                name: 'name',
                gender: 'gender',
                age: "age"
            },
            msg: '',
            newarr: [],

        },
        filters: {
            toUp(val) {
                console.log(typeof val);
                return val[0].toUpperCase() + val.toString().substr(1)
                // return val.charAt(0).toUpperCase()+val.substr(1)
            }
        },
        computed: {
            change() {
                this.newarr = []
                for (var i = 0; i < this.arr.length; i++) {
                    console.log(this.arr[i].name);
                    let str = this.arr[i].name.toLowerCase()
                    let newmsg = this.msg.toLowerCase()
                    // match 检索是否有某个值
                    if (str.match(newmsg) != null) {
                        this.newarr.push(this.arr[i])
                    }
                }
                console.log(this.newarr);
                return this.newarr
            }
        }

    })
</script>

</html>